<template>
    <div class="security">
        <div class="security-head clear-float">
            <div class="security-head-left fl"></div>
            <div class="security-head-middle fl">天生卫士服务平台</div>
            <div class="security-head-right fr"></div>
        </div>
        <div class="content clear-float">
            <div class="security-left fl">
                <div class="company-ranking">
                    <p @click="openTotal('单位')">卫士单位排名</p>
                    <div class="common-table">
                        <table>
                            <thead>
                            <tr>
                                <th>排名</th>
                                <th>单位</th>
                                <th>积分</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item,index) in companyList" :key="item.id" v-if="index<6">
                                <td>{{index+1}}</td>
                                <td class="w100" :title="item.company"><span class="show-one-row">{{item.company}}</span></td>
                                <td>{{item.integralYear?item.integralYear:0}}</td>
                            </tr>
                            <tr v-if="!companyList.length">
                                <td colspan="3">暂无数据</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="statistics"  id="total-statistics">
                    <div v-if="!pieNameList.length">暂无数据</div>
                </div>
            </div>
            <div class="security-middle fl">
                <div class="menu">
                    <img src="../../../assets/securityMap.png"/>
                    <router-link :to="{name: 'ipad/guardThroughTrain'}"><img src="../../../assets/guardThroughTrain.png"/></router-link>
                    <router-link :to="{name: 'ipad/activityStatistics'}"><img src="../../../assets/activityStatistics.png"/></router-link>
                    <router-link :to="{name: 'ipad/guardianHouse'}"> <img src="../../../assets/guardianHouse.png"/></router-link>
                </div>
                <div class="carousel">
                    <el-carousel height="380px" :interval="6000">
                        <el-carousel-item v-for="item in carouselList" :key="item.id">
                            <img :src="item.url" width="100%" height="100%"/>
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
            <div class="security-right fl">
             <div class="guard-ranking clear-float">
                    <p @click="openTotal('卫士排名')">卫士排名</p>
                    <div class="common-table">
                        <table>
                            <thead>
                            <tr>
                                <th>卫士姓名</th>
                                <th>单位</th>
                                <th>积分</th>
                                <th>等级</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item,index) in userList" v-if="index<12" :key="item.id">
                                <td class="w100" :title="item.name"><span class="show-one-row">{{item.name}}</span></td>
                                <td class="w100" :title="item.company"><span class="show-one-row">{{item.company}}</span></td>
                                <td>{{item.integralYear?item.integralYear:0}}</td>
                                <td>
                                    <img :src="'/images/'+item.levelIcon+'.png'"/>
                                </td>
                            </tr>
                            <tr v-if="!userList.length">
                                <td colspan="4">暂无数据</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="property_modal">
            <div class="modal-content">
                <div class="header-text">
                    <p>{{title}}</p>
                    <span @click="offBoxs()">x</span>
                </div>
                <div class="section-nav">
                    <div class="search">
                        <input class="input" v-model="inputText" :placeholder="placeholder" @keyup.enter="search()"/>
                        <button class="short-btn" @click="search()">搜索</button>
                    </div>
                    <div class="common-table rank">
                        <table>
                            <thead>
                            <tr>
                                <th v-if="title=='卫士单位排名'">排名</th>
                                <th v-if="title=='卫士排名'">卫士姓名</th>
                                <th>单位</th>
                                <th>积分</th>
                                <th v-if="title=='卫士排名'">等级</th>
                            </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item,index) in totalList"  :key="item.id">
                                    <td v-if="title=='卫士单位排名'">{{index+1}}</td>
                                    <td class="w100" :title="item.name" v-if="title=='卫士排名'">
                                        <span class="show-one-row">{{item.name}}</span>
                                    </td>
                                    <td class="w400" :title="item.company" >
                                        <span class="show-one-row">{{item.company}}</span>
                                    </td>
                                    <td>{{item.integralYear?item.integralYear:0}}</td>
                                    <td v-if="title=='卫士排名'">
                                        <img :src="'/images/'+item.levelIcon+'.png'"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="3" v-if="title=='卫士单位排名'&&!totalList.length">暂无数据</td>
                                    <td colspan="4" v-if="title=='卫士排名'&&!totalList.length">暂无数据</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script src="./securityMap.js"></script>

<style scoped lang="less">
    @import "../../../common/less/common.less";
    @import "securityMap.less";
</style>
